<template>
  <div>
    <!-- 搜索 -->
    <!-- 员工选择 -->
    <TopFilter :list="topFilterInit" :cols="2" :collapse="collapse" labelWidth="90" @filterChange="changeHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      height="auto"
      selectionType="single"
      ref="table"
      :columns="columns"
      :params="fetchParams"
      :fetchapi="fetchapi"
      :datakey="'records'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChange"
    >
    </FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <multiuse-button type="primary" :click="saveDialog.bind()" :disabled="disableds">添 加</multiuse-button>
      <multiuse-button @click="closeDialog">关 闭</multiuse-button>
    </div>
  </div>
</template>
<script>
import {dictionary} from '@/utils/dictMixin';
import {searchEmployee} from '@/api/common/auth/employeeAuth';
import {getComOrgTreeListDistinct} from '@/api/common/org/employeeInfo';
import {getJsonTree} from '@/utils/index';

export default {
  mixins: [dictionary],
  data() {
    return {
      visible: false,
      disableds: true,
      fetchapi: searchEmployee,
      visibleDrawer: false,
      collapse: true,
      infoId: null,
      topFilterInit: this.topFilterInitFun(),
      flterValue: {}, //参数
      columns: this.creatHeader(),
      fetchParams: {
        fetchParams: { xhrAbort: false, employeeName: '', employeeNo: '', employeeStatus: '', orgId: '', validStatus: '' },
      }, //ipa 接口
      selectedRows: [] //选中经销商
    };
  },
  created() {
    this.inputTree();
  },
  methods: {
    async inputTree() {
      const res = await getComOrgTreeListDistinct();
      var that = res.data;
      that.forEach(el => (el.text = el.text));
      that.forEach(el => (el.value = el.orgId));
      that.forEach(el => (el.parentId = el.parent));
      this.topFilterInit.find(item => item.fieldName === 'orgId').itemList = getJsonTree(that);
    },
    //搜索数据
    topFilterInitFun() {
      return [
        {
          type: 'INPUT',
          label: '员工姓名',
          fieldName: 'employeeName',
          placeholder: '员工姓名...'
        },
        {
          type: 'INPUT',
          label: '员工编号',
          fieldName: 'employeeNo',
          placeholder: '员工编号...'
        },
        // {
        //   type: 'INPUT',
        //   label: '账号',
        //   fieldName: 'userCode',
        //   placeholder: '账号...'
        // },
        {
          //2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-START
          type: 'INPUT_TREE',
          //2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-END
          label: '所属部门',
          fieldName: 'orgId',
          placeholder: '所属部门...',
          //2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-START
          initialValue: '',
          itemList: []
          //2019-12-17 【更改】 员工管理查询条件中所属部门改为树形结构-END
        },
        {
          type: 'SELECT',
          label: '在职状态',
          fieldName: 'employeeStatus',
          placeholder: '请选择...',
          itemList: this.createDictList('1008')
        },
        {
          type: 'SELECT',
          label: '是否冻结',
          fieldName: 'lockFlag',
          placeholder: '请选择...',
          itemList: this.createDictList('1004')
        }
      ];
    },
   //搜索获取数据
    changeHandle(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val);
      console.log(val);
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '员工编号',
          dataIndex: 'employeeNo',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        /* {
            title: '账号',
            dataIndex: 'userCode',
            sorter: true,
            filter: true,
            filterType: 'input',
            // align:"center"
          }, */
        {
          title: '员工姓名',
          dataIndex: 'employeeName',
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '性别',
          dataIndex: 'gender',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1002'),
          render: props => {
            return <span>{this.createDictText(props.row.gender, '1002')}</span>;
          }
        },
        {
          title: '手机号码',
          dataIndex: 'mobilePhone',
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '所属部门',
          dataIndex: 'orgName',
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '在职状态',
          dataIndex: 'employeeStatus',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1008'),
          render: props => {
            // return <el-tag type={props.row.employeeStatus === 10081001 ? 'success' : 'primary'} close-transition>{this.createDictText(props.row.employeeStatus, '1008')}</el-tag>;
            return <span>{this.createDictText(props.row.employeeStatus, '1008')}</span>;
          }
        },
        /* {
            title: '状态',
            dataIndex: 'userStatus',
            sorter: true,
            filter: true,
            filterType: 'checkbox',
            filterItems: this.createDictList('1003'),
            render: props => {
              return <el-tag type={props.row.userStatus === 10031001 ? 'success' : 'primary'} close-transition>{this.createDictText(props.row.userStatus, '1003')}</el-tag>;
            }
          }, */
        {
          title: '职位',
          dataIndex: 'position',
          sorter: true,
          filter: true,
          filterType: 'input',
          width: 250
          // align:"center"
        },
        /* {
            title: '员工职位',
            dataIndex: 'empPosition',
            sorter: true,
            filter: true,
            filterType: 'input',
            // align:"center"
          }, */
        {
          title: '是否冻结',
          dataIndex: 'lockFlag',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1004'),
          render: props => {
            // return <el-tag type={props.row.lockFlag === 10041001 ? 'success' : 'primary'} close-transition>{this.createDictText(props.row.lockFlag, '1004')}</el-tag>;
            return <span>{this.createDictText(props.row.lockFlag, '1004')}</span>;
          }
        },
        {
          title: '数据来源',
          dataIndex: 'dataSources',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1045'),
          render: props => {
            return <span>{this.createDictText(props.row.dataSources, '1045')}</span>;
          }
        }
      ];
    },
    //选中
    selectChange(rows) {
      this.selectedRows = rows;
      this.disableds = this.selectedRows.length <= 0;
      console.log(this.selectedRows);
    },
    //保存
    saveDialog() {
      this.selectedRows.map(x => {
        x.staffId = x.userCode;
        x.staffCode = x.employeeNo;
        x.staffName = x.employeeName;
        x.staffTel = x.mobilePhone;
      });
      this.$emit('save', this.selectedRows);
    },
    //取消操作
    closeDialog() {
      this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
    },
    chooseOrderNo() {
      this.visible = true;
    }
  }
  // mounted() {
  //   this.BaseTable = this.$refs.listModal.$refs.pageTable;
  // }
};
</script>

<style lang="less" scoped></style>
